<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button data-action="save">btn1</button>
    <button data-act="edit">btn2</button>
    <button data-act="del">btn3</button>
    <button data-act="update">btn4</button>


    <input type="text" data-input="getusername" name="" id="">
    <input type="text" data-input="getemail" name="" id="">
    <script>

        const obj = {
            save() {
                console.log('save');
            },
            del() {
                console.log('del');
            },
            edit() {
                console.log('edit');
            },
            update(e) {
                console.log(this, e);
                console.log('update');
            },
        }

        function _on(a, methods, type = 'click') {
            document.addEventListener(type, function (e) {
                const target = e.target;
                const action = target.dataset[a];
                // 判断action和action[方法]不能undefined
                if (action === undefined || methods[action] === undefined) return;
                // 调用事件执行的方法，绑定this，传递事件对象
                methods[action].call(target, e);
            });
        }

        // _on('act', obj, 'dblclick');
        _on('act', obj);


        _on('input', {
            getusername() {
                console.log('getusername');
            },
            getemail() {
                console.log('getemail');
            }
        }, 'input');

    </script>

</body>

</html>